<template>
  <div 
    :class="['super-golden-card', { 'is-player-card': isPlayerCard, 'is-group-player': isGroupPlayer }]"
    :draggable="draggable"
    @dragstart="$emit('dragstart', $event)"
  >
    <!-- 背景冒星星效果 -->
    <div class="bubble-star-0">⭐</div>
    <div class="bubble-star-1">⭐</div>
    <div class="bubble-star-2">⭐</div>
    <div class="bubble-star-3">⭐</div>
    <div class="bubble-star-4">⭐</div>
    <div class="bubble-star-5">⭐</div>
    <div class="bubble-star-6">⭐</div>
    <div class="bubble-star-7">⭐</div>
    <div class="bubble-star-8">⭐</div>
    <div class="bubble-star-9">⭐</div>
    <div class="bubble-star-10">⭐</div>
    <div class="bubble-star-11">⭐</div>

    <!-- 插槽内容 -->
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
interface Props {
  isPlayerCard?: boolean
  isGroupPlayer?: boolean
  draggable?: boolean
}

defineProps<Props>()
defineEmits<{
  dragstart: [event: DragEvent]
}>()
</script>

<style scoped>
/* 超级炫酷金色卡片样式 - 闪瞎眼睛版本 */
@keyframes superGoldenGlow {
  0%, 100% {
    box-shadow: 
      0 0 30px rgba(255, 215, 0, 0.8),
      0 0 60px rgba(255, 193, 7, 0.6),
      0 0 90px rgba(255, 165, 0, 0.4),
      0 0 120px rgba(255, 140, 0, 0.2),
      inset 0 0 30px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 
      0 0 50px rgba(255, 215, 0, 1),
      0 0 100px rgba(255, 193, 7, 0.8),
      0 0 150px rgba(255, 165, 0, 0.6),
      0 0 200px rgba(255, 140, 0, 0.4),
      inset 0 0 50px rgba(255, 215, 0, 0.5);
  }
}

@keyframes superGoldenPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

@keyframes superGoldenRainbow {
  0% { filter: hue-rotate(0deg); }
  25% { filter: hue-rotate(15deg); }
  50% { filter: hue-rotate(30deg); }
  75% { filter: hue-rotate(15deg); }
  100% { filter: hue-rotate(0deg); }
}

@keyframes superGoldenSparkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(180deg);
  }
}

@keyframes bubbleStar {
  0% {
    opacity: 0;
    transform: translateY(100%) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translateY(80%) scale(0.6) rotate(72deg);
  }
  40% {
    opacity: 1;
    transform: translateY(60%) scale(0.8) rotate(144deg);
  }
  60% {
    opacity: 1;
    transform: translateY(40%) scale(1) rotate(216deg);
  }
  80% {
    opacity: 0.8;
    transform: translateY(20%) scale(0.8) rotate(288deg);
  }
  100% {
    opacity: 0;
    transform: translateY(0%) scale(0.5) rotate(360deg);
  }
}

@keyframes bubbleStarTop {
  0% {
    opacity: 0;
    transform: translateY(-100%) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translateY(-80%) scale(0.6) rotate(72deg);
  }
  40% {
    opacity: 1;
    transform: translateY(-60%) scale(0.8) rotate(144deg);
  }
  60% {
    opacity: 1;
    transform: translateY(-40%) scale(1) rotate(216deg);
  }
  80% {
    opacity: 0.8;
    transform: translateY(-20%) scale(0.8) rotate(288deg);
  }
  100% {
    opacity: 0;
    transform: translateY(0%) scale(0.5) rotate(360deg);
  }
}

@keyframes bubbleStarLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translateX(-80%) scale(0.6) rotate(72deg);
  }
  40% {
    opacity: 1;
    transform: translateX(-60%) scale(0.8) rotate(144deg);
  }
  60% {
    opacity: 1;
    transform: translateX(-40%) scale(1) rotate(216deg);
  }
  80% {
    opacity: 0.8;
    transform: translateX(-20%) scale(0.8) rotate(288deg);
  }
  100% {
    opacity: 0;
    transform: translateX(0%) scale(0.5) rotate(360deg);
  }
}

@keyframes bubbleStarRight {
  0% {
    opacity: 0;
    transform: translateX(100%) scale(0.3) rotate(0deg);
  }
  20% {
    opacity: 0.8;
    transform: translateX(80%) scale(0.6) rotate(72deg);
  }
  40% {
    opacity: 1;
    transform: translateX(60%) scale(0.8) rotate(144deg);
  }
  60% {
    opacity: 1;
    transform: translateX(40%) scale(1) rotate(216deg);
  }
  80% {
    opacity: 0.8;
    transform: translateX(20%) scale(0.8) rotate(288deg);
  }
  100% {
    opacity: 0;
    transform: translateX(0%) scale(0.5) rotate(360deg);
  }
}

.super-golden-card {
  background: linear-gradient(135deg, 
    rgba(255, 215, 0, 0.6) 0%, 
    rgba(255, 193, 7, 0.5) 25%,
    rgba(255, 165, 0, 0.6) 50%,
    rgba(255, 193, 7, 0.5) 75%,
    rgba(255, 215, 0, 0.6) 100%);
  border: 4px solid;
  border-image: linear-gradient(45deg, #ffd700, #ffb300, #ff8c00, #ffd700) 1;
  animation: superGoldenGlow 2s ease-in-out infinite, superGoldenPulse 3s ease-in-out infinite;
  position: relative;
  overflow: visible;
  cursor: grab;
  transition: all 0.3s ease;
  box-shadow: 
    0 0 30px rgba(255, 215, 0, 0.8),
    0 0 60px rgba(255, 193, 7, 0.6),
    0 0 90px rgba(255, 165, 0, 0.4),
    inset 0 0 20px rgba(255, 215, 0, 0.3);
}

.super-golden-card::after {
  content: '✨';
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 24px;
  animation: superGoldenSparkle 2s ease-in-out infinite;
  z-index: 10;
}

.super-golden-card:hover {
  animation: superGoldenGlow 0.5s ease-in-out infinite, superGoldenPulse 1s ease-in-out infinite, superGoldenRainbow 2s ease-in-out infinite;
  transform: translateY(-8px) scale(1.08);
  z-index: 100;
  box-shadow: 
    0 0 60px rgba(255, 215, 0, 1),
    0 0 120px rgba(255, 193, 7, 0.8),
    0 0 180px rgba(255, 165, 0, 0.6),
    0 0 240px rgba(255, 140, 0, 0.4),
    inset 0 0 60px rgba(255, 215, 0, 0.5);
}

/* 选手卡片样式 */
.super-golden-card.is-player-card {
  border-radius: 10px;
  padding: 12px;
  width: calc((100% - 24px) / 3);
  min-width: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.super-golden-card.is-player-card > * {
  flex-shrink: 0;
}

.super-golden-card.is-player-card > *:last-child {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 分组中的选手样式 */
.super-golden-card.is-group-player {
  border-radius: 3px;
  padding: 6px 8px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: auto;
  height: auto !important;
  max-height: none !important;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 193, 7, 0.15) 100%);
  border: 1px solid rgba(255, 215, 0, 0.4);
  overflow: hidden;
  cursor: pointer;
}

.super-golden-card.is-group-player:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.35) 0%, rgba(255, 193, 7, 0.25) 100%);
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* 背景冒星星效果 - 四个方向 */
.super-golden-card .bubble-star-0 {
  position: absolute;
  bottom: 0;
  left: 15%;
  font-size: 12px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: bubbleStar 4s ease-out infinite;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-1 {
  position: absolute;
  top: 0;
  left: 25%;
  font-size: 10px;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
  animation: bubbleStarTop 3.5s ease-out infinite;
  animation-delay: 0.8s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-2 {
  position: absolute;
  left: 0;
  top: 30%;
  font-size: 14px;
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.9);
  animation: bubbleStarLeft 4.5s ease-out infinite;
  animation-delay: 1.6s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-3 {
  position: absolute;
  right: 0;
  top: 60%;
  font-size: 8px;
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
  animation: bubbleStarRight 3.8s ease-out infinite;
  animation-delay: 2.4s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-4 {
  position: absolute;
  bottom: 0;
  right: 20%;
  font-size: 11px;
  color: #ffd700;
  text-shadow: 0 0 7px rgba(255, 215, 0, 0.8);
  animation: bubbleStar 4.2s ease-out infinite;
  animation-delay: 3.2s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-5 {
  position: absolute;
  top: 0;
  right: 15%;
  font-size: 9px;
  color: #ffd700;
  text-shadow: 0 0 5px rgba(255, 215, 0, 0.7);
  animation: bubbleStarTop 3.8s ease-out infinite;
  animation-delay: 0.4s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-6 {
  position: absolute;
  left: 0;
  bottom: 30%;
  font-size: 13px;
  color: #ffd700;
  text-shadow: 0 0 9px rgba(255, 215, 0, 0.9);
  animation: bubbleStarLeft 4.8s ease-out infinite;
  animation-delay: 1.2s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-7 {
  position: absolute;
  right: 0;
  bottom: 20%;
  font-size: 7px;
  color: #ffd700;
  text-shadow: 0 0 3px rgba(255, 215, 0, 0.6);
  animation: bubbleStarRight 3.2s ease-out infinite;
  animation-delay: 2.8s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-8 {
  position: absolute;
  bottom: 0;
  left: 45%;
  font-size: 15px;
  color: #ffd700;
  text-shadow: 0 0 11px rgba(255, 215, 0, 1);
  animation: bubbleStar 5s ease-out infinite;
  animation-delay: 0.2s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-9 {
  position: absolute;
  top: 0;
  left: 65%;
  font-size: 8px;
  color: #ffd700;
  text-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
  animation: bubbleStarTop 4.1s ease-out infinite;
  animation-delay: 1.5s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-10 {
  position: absolute;
  left: 0;
  top: 70%;
  font-size: 12px;
  color: #ffd700;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: bubbleStarLeft 3.6s ease-out infinite;
  animation-delay: 2.1s;
  z-index: 20;
  pointer-events: none;
}

.super-golden-card .bubble-star-11 {
  position: absolute;
  right: 0;
  top: 80%;
  font-size: 10px;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
  animation: bubbleStarRight 4.3s ease-out infinite;
  animation-delay: 0.9s;
  z-index: 20;
  pointer-events: none;
}

/* 选手卡片内容样式 - 使用深度选择器 */
.super-golden-card.is-player-card :deep(.player-name) {
  color: #ffd700 !important;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 193, 7, 0.8),
    0 0 60px rgba(255, 165, 0, 0.6) !important;
  font-weight: 900 !important;
  animation: superGoldenPulse 2s ease-in-out infinite;
  font-size: 16px !important;
  margin-bottom: 6px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
  letter-spacing: 0.5px !important;
  flex: 0 0 auto !important;
}

.super-golden-card.is-player-card :deep(.player-ability) {
  display: flex !important;
  justify-content: center !important;
  gap: 2px !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
}

.super-golden-card.is-player-card :deep(.player-ability .star) {
  color: #ffd700 !important;
  text-shadow: 
    0 0 20px rgba(255, 215, 0, 1),
    0 0 40px rgba(255, 193, 7, 0.8) !important;
  animation: superGoldenSparkle 3s ease-in-out infinite;
  font-size: 16px !important;
}

.super-golden-card.is-player-card :deep(.player-stats) {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
}

.super-golden-card.is-player-card :deep(.player-stats .rank) {
  font-size: 11px !important;
  color: #ffd700 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.5) !important;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 215, 0, 0.05)) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
}

.super-golden-card.is-player-card :deep(.player-stats .mmr) {
  font-size: 11px !important;
  color: #4caf50 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.5) !important;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(76, 175, 80, 0.05)) !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(76, 175, 80, 0.2) !important;
}

.super-golden-card.is-player-card :deep(.player-positions) {
  font-size: 11px !important;
  color: #2196f3 !important;
  font-weight: 600 !important;
  text-align: center !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  padding: 4px 8px !important;
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.08)) !important;
  border-radius: 4px !important;
  border: 1px solid rgba(33, 150, 243, 0.3) !important;
  text-shadow: 0 0 6px rgba(33, 150, 243, 0.6) !important;
  height: 20px !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

.super-golden-card.is-player-card :deep(.player-tags) {
  font-size: 16px !important;
  color: #ff6b9d !important;
  text-align: center !important;
  line-height: 1.3 !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 107, 157, 0.1)) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 107, 157, 0.3) !important;
  box-shadow: 0 1px 4px rgba(255, 107, 157, 0.2) !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 0 !important;
}

/* 分组中的内容样式 */
.super-golden-card.is-group-player :deep(.player-name) {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
  font-weight: bold !important;
  font-size: 12px !important;
  margin-bottom: 1px !important;
  line-height: 1.2 !important;
}

.super-golden-card.is-group-player :deep(.player-info) {
  flex: 1 !important;
}

.super-golden-card.is-group-player :deep(.group-player-ability) {
  display: flex !important;
  gap: 1px !important;
  margin-bottom: 2px !important;
  justify-content: center !important;
}

.super-golden-card.is-group-player :deep(.group-star) {
  color: #ffd700 !important;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.6) !important;
  font-size: 10px !important;
}

.super-golden-card.is-group-player :deep(.player-details) {
  display: flex !important;
  gap: 6px !important;
  font-size: 11px !important;
  flex-wrap: nowrap !important;
}

.super-golden-card.is-group-player :deep(.player-details .rank) {
  color: #ffd700 !important;
  font-weight: 500 !important;
}

.super-golden-card.is-group-player :deep(.player-details .mmr) {
  color: #4caf50 !important;
  font-weight: 500 !important;
}

.super-golden-card.is-group-player :deep(.player-details .ability) {
  color: #ff9800 !important;
  font-weight: 500 !important;
}

.super-golden-card.is-group-player :deep(.player-positions) {
  font-size: 11px !important;
  color: #b0bec5 !important;
  margin-top: 1px !important;
  line-height: 1.2 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

.super-golden-card.is-group-player :deep(.player-tags) {
  font-size: 11px !important;
  color: #ff6b9d !important;
  margin-top: 3px !important;
  line-height: 1.3 !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  white-space: normal !important;
  max-width: 100% !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 107, 157, 0.1)) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(255, 107, 157, 0.3) !important;
  box-shadow: 0 1px 4px rgba(255, 107, 157, 0.2) !important;
}

.super-golden-card.is-player-card :deep(.player-ability .star:nth-child(2)) {
  animation-delay: 0.3s;
}

.super-golden-card.is-player-card :deep(.player-ability .star:nth-child(3)) {
  animation-delay: 0.6s;
}

.super-golden-card.is-player-card :deep(.player-ability .star:nth-child(4)) {
  animation-delay: 0.9s;
}

.super-golden-card.is-player-card :deep(.player-ability .star:nth-child(5)) {
  animation-delay: 1.2s;
}


</style>
